<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="vue.js"></script>
	<script src="vue-router.js"></script>
</head>
<body>
	<div id="box">
		<a v-link="{path:'/home'}">主页</a>
		<a v-link="{path:'/news'}">新闻</a>
		<router-view></router-view>
	</div>

	<script>
		//1. 准备一个根组件
		var App=Vue.extend();

		//2. Home News组件都准备
		var Home=Vue.extend({
			template:'<h3>我是主页</h3>' +
			'<p><span>导航1</span> <span>导航2</span> <span>导航3</span> <span>导航4</span></p>'
		});

		var News=Vue.extend({
			template:'<h3>我是新闻</h3>' +
			'<ul><li>新闻1</li><li>新闻2</li><li>新闻3</li><li>新闻4</li></ul>'
		});

		//3. 准备路由
		var router=new VueRouter();

		//4. 关联
		router.map({
			home:{component:Home},
			news:{component:News}
		});

		//5. 启动路由
		router.start(App,'#box');

		//6. 跳转
		/*router.redirect({
			'/':'home'
		});*/
	</script>
</body>
</html>